<template>
    <div>
        <div class="header">
            <div class="sign-out" @click="fun()">
            <van-icon name="arrow-left" size=".22rem" />

            </div>
            <p>盒马霸王餐</p>
            <div class="icon">
                <van-icon name="cart-o" badge="9" size=".22rem" color="#000000"/>
                <img src="/image/Life/zhuan.png" alt="">
            </div>
        </div>
        <div class="meal-top">
            <img src="/image/Life/meal.png" alt="">
        </div>
        
        <div class="meal-bottom">
            <img src="/image/Life/mealbot.png" alt="">
            <a href="https://fanyi.baidu.com/?aldtype=16047#zh/en/%E8%AF%9D%E9%A2%98"></a>
            <a href="#"></a>
        </div>
    </div>
    
</template>

<script>
export default {
    methods:{
        fun(){
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
    .header{
        position: fixed;
        top: 0;
        width: 100%;
        height: .5rem;
        background-color: #cbe7ff;
        z-index: 99;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sign-out{
        width: .25rem;
        height: .25rem;
        z-index: 99;
        margin-left: .1rem;
    }
    .header img{
        width: .17rem;
        height: .17rem;
        margin-top: .03rem;
    }
    .header .icon{
        margin-right: .15rem;
        width: .5rem;
        display: flex;
        justify-content: space-between;
    }
    .header p{
        position: absolute;
        text-align: center;
        line-height: .5rem;
        font-size: .18rem;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .meal-top>img{
        width: 100%;
        margin-top: .5rem;
        margin-bottom: .09rem;
    }
    .meal-bottom{
        position: fixed;
        bottom: 0;
        height: .54rem;
        z-index: 99;
        display: flex;
    }
    .meal-bottom>img{
        width: 100%;
        height: .54rem;
    }
    .meal-bottom a{
        display: inline-block;
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
    }
    .meal-bottom a:nth-child(3){
        position: absolute;
        right: 0;
    }
</style>